<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-tickets"></i> 日志列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">

    <!--        <div class="handle-box">
                <el-button type="primary" icon="delete" class="handle-del mr10" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
                <el-input v-model="name" placeholder="菜单名"  class="handle-input mr10"></el-input>
                <el-input v-model="url" placeholder="访问路径"  class="handle-input mr10" ></el-input>
                <el-button type="primary" icon="search" @click="search">搜索</el-button>
            </div>
-->
            <!--列表-->
            <el-table :data="tableData" highlight-current-row   max-height="700" v-loading="listLoading" @selection-change="selsChange"
                      style="width: 100%;">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column
                    prop="account"
                    label="操作者"
                >
                </el-table-column>

                <el-table-column
                    prop="value"
                    label="日志内容"
                >
                </el-table-column>
                <el-table-column
                    prop="type"
                    label="日志类型"
                >
                </el-table-column>
                <el-table-column
                    prop="time"
                    label="时间"
                >
                </el-table-column>
                <el-table-column
                    prop="ip"
                    label="IP"
                >
                </el-table-column>
                <el-table-column
                    prop="useTime"
                    sortable
                    label="访问耗时">
                </el-table-column>
                <el-table-column label="操作" width="150">
                    <template  slot-scope="scope">
                        <!--<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
                        <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>


            <div class="pagination">
                <el-pagination background layout="total, sizes, prev, pager, next, jumper"
                               :page-size="pageSize"
                               :current-page="pageNo"
                               @size-change="handleSizeChange"
                               @current-change="handleCurrentChange" :total="total" >
                </el-pagination>
            </div>
        </div>





    </div>
</template>

<script>
    import axiosHttpUtil from "../service/axiosHttpUtil.js";
    import serviceApi from '../service/serviceApi.js'


    export default {
        data() {
            return {
                filters: {
                    name: ''
                },
                tableData: [],
                total: 0,
                pageSize: 10,
                pageNo: 1,
                listLoading: true,
                sels: [],//列表选中列

            }
        },
        created()  {
            this.getLogList(this.pageNo, this.pageSize);
        },
        methods: {

            //获取用户列表
            getLogList(pageNo,pageSize) {
                var _this = this;
                axiosHttpUtil(serviceApi.logList,{
                    pageNo:pageNo,
                    pageSize:pageSize,
                }).then((res)=>{
                    if(res.status ===200 ){
                        setTimeout(function(){
                            _this.listLoading=false
                        },500);
                        _this.tableData = res.data.data;
                        _this.total = res.data.total;
                        _this.listLoading=true;

                        this.$message.success('查询成功');
                    }else {
                        _this.listLoading=false;
                        this.$message.error('查询error');
                    }

                },(error)=>{
                    this.pageLoadingFlag = false;

                    console.log(error)
                })


            },
            //点击页码事件
            handleCurrentChange(pageNo) {
                this.getLogList(pageNo, this.pageSize)
            },
            //改变分页大小事件
            handleSizeChange(pageSize) {
                this.getLogList(this.pageNo, pageSize)
            },
            //删除
            handleDel: function (index, row) {
                var _this=this
                _this.$confirm('确认删除该日志吗?', '提示', {
                    type: 'warning'
                }).then(function(){
                    //请用请求进行删除
                    _this.$message({
                        message: row.id+'删除成功',
                        type: 'success'
                    });
                }).catch(function(){
                    _this.$message({
                        message: row.id+'删除失败',
                        type: 'error'
                    });
                });
            },
            selsChange: function (sels) {
                this.sels = sels;
            },
            //批量删除
            batchRemove: function () {
                var _this=this
                _this.$confirm('确认批量删除日志吗?', '提示', {
                    type: 'warning'
                }).then(function(){
                    //请用请求进行删除
                    _this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                }).catch(function(){
                    _this.$message({
                        message: '删除失败',
                        type: 'error'
                    });
                });
            }
        }

    }


</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }

    .del-dialog-cnt {
        font-size: 16px;
        text-align: center
    }
</style>
